<template>
    <div class="wrapper"> 
        <swiper :options="swiperOption" >
            <!-- slides -->
            <swiper-slide v-for="item of swiperList" :key="item.id">
                <img class="swiper-img" :src="item.imgUrl" alt="">
            </swiper-slide>
            <!-- Optional controls -->
            <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
    </div>

</template>

<script>

export default {
    name:'HomeSwiper',
    data(){
        return {
            swiperOption:{  //控制小圆点得
                pagination:'.swiper-pagination',//显示分页的div
                loop: true
            },
            swiperList:[{
                id: '0001',
                imgUrl: "http://img1.qunarzz.com/piao/fusion/1811/29/2a6b77b6ff72402.jpg_750x200_d4cec568.jpg"
            },{
                id: '0002',
                imgUrl: "http://img1.qunarzz.com/piao/fusion/1811/11/5fd3b05ad948bf02.jpg_750x200_56a60662.jpg"
            },
            {
                id: '0003',
                imgUrl: "http://img1.qunarzz.com/piao/fusion/1812/a8/90d66a621daf6802.jpg_750x200_d479b789.jpg"
            },{
                id: '0004',
                imgUrl: "http://img1.qunarzz.com/piao/fusion/1805/f1/e57bc93226317102.jpg_750x200_9ab37bd0.jpg"
            }]
        }
    }
}
</script>

<style lang="stylus" scoped>
  .wrapper >>> .swiper-pagination-bullet-active
    background: #fff !important
  .wrapper
    overflow: hidden
    width: 100%
    height: 0
    padding-bottom: 26.6% 
    background: gray 
    .swiper-img
      width: 100%;

</style>

